<template>
    <view class="container">
        <view class="name-box">
            <view class="label">分身名称</view>
            <u-input
                border="null"
                placeholder="请输入分身名称"
                v-model="title"
            ></u-input>
        </view>
        <view class="upload-wrap">
            <view @tap="upload" class="upload-box default" v-if="!uploadObj.status">
                <image mode="widthFix" src="/static/clone/ic_upload_body.png"></image>
                <view class="text">上传视频</view>
            </view>
            <view class="upload-box success" v-if="uploadObj.url && uploadObj.status === 'success'">
                <view class="play-btn">
                    <view @tap="clearUploadObj" class="close">
                        <u-icon name="close-circle-fill" :size="24"></u-icon>
                    </view>
                    <image
                        @tap="goPlayVideo"
                        mode="widthFix"
                        src="/static/clone/play-icon.png"
                    ></image>
                </view>
                <image class="cover" mode="aspectFill" :src="uploadObj.poster || uploadObj.thumbTempFilePath"></image>
            </view>
            <view class="upload-box" v-if="uploadObj.status && uploadObj.status === 'loading'">
                <view class="upload-status">
                    <view class="proress">{{ '' + uploadObj.progress + '%' }}</view>
                    <view>上传中</view>
                </view>
            </view>
            <view class="upload-box fail" v-if="uploadObj.status && uploadObj.status === 'fail'">
              <view class="play-btn">
                <view @tap="clearUploadObj" class="close">
                  <u-icon name="close-circle-fill" :size="24"></u-icon>
                </view>
              </view>
              <view>上传失败</view>
            </view>
            <view class="rule-wrap">
                <view class="top">
                    <view class="label">视频录制要求</view>
                </view>
                <u-row
                    align="top"
                    customStyle="margin-top: 10px;border-bottom: 2rpx solid #F5F5F5;padding-bottom: 16rpx"
                    v-for="(item, index) in hintList"
                    :key="index"
                >
                  <u-col span="3">
                    <view class="desc-label">{{ item.title }}</view>
                  </u-col>
                  <u-col span="9">
                    <view class="desc-value">
                      <view v-for="text in item.content">{{ text }}</view>
                    </view>
                  </u-col>
                </u-row>
                <view class="top" style="margin-top: 40rpx;">
                  <view class="label">错误示例</view>
                </view>
                <view class="example">

                  <view class="list">
                    <view class="item">
                      <image mode="widthFix" src="/static/clone/fail/mutil_face.png"></image>
                      <view class="text">多人出镜</view>
                    </view>
                    <view class="item">
                      <image mode="widthFix" src="/static/clone/fail/mask_face.png"></image>
                      <view class="text">嘴部遮挡</view>
                    </view>
                    <view class="item">
                      <image mode="widthFix" src="/static/clone/fail/large_face.png"></image>
                      <view class="text">面部过大</view>
                    </view>
                    <view class="item">
                      <image mode="widthFix" src="/static/clone/fail/no_face.png"></image>
                      <view class="text">无人脸</view>
                    </view>
                  </view>
                </view>
            </view>

        </view>
        <view class="button">
            <button @tap="confirm" class="confirm-btn" :plian="true">提交</button>
        </view>
        <protocol @close="protocolClose" ref="protocol"></protocol>
    </view>
</template>

<script>
import protocol from '@/components/protocol'
export default {
  components: { protocol },
  data() {
    return {
      title: '',
      uploadObj: {
        url: '',
        title: '',
        size: '',
        duration: '',
        filePath: '',
        progress: 0,
        status: ''
      },
      hintList: []
    };
  },
  onLoad(option) {
    this.getHintList()
  },
  methods: {
    protocolClose() {
      uni.navigateBack({
        fail: function (err) {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }
      });
    },
    getHintList() {
      this.$util.request({
        url: '/userBody/getHintList'
      }).then(res => {
        var hintList = res.data
        hintList.forEach((item,index) => {
          hintList[index].content = item.content.split("\n");
        })
        this.hintList = hintList
      })
    },
    goPlayVideo() {
      uni.navigateTo({
        url: '/pages/common/video-play?video_url=' + this.uploadObj.url + '&poster=' + this.uploadObj.poster
      });
    },
    clearUploadObj() {
      this.uploadObj = {
        url: '',
        title: '',
        size: '',
        duration: '',
        filePath: '',
        progress: 0,
        status: ''
      };
    },
    confirm() {
      if (!this.title) {
        this.$util.message('请输入分身名称')
        return
      }

      if (!this.uploadObj.url) {
        this.$util.message('请上传视频')
        return
      }

      this.$util.request({
        url: '/userBody/submit',
        data: {
          title: this.title,
          video_url: this.uploadObj.url,
          poster: this.uploadObj.poster ? this.uploadObj.poster : '',
          duration: this.uploadObj.duration,
          width: this.uploadObj.width,
          height: this.uploadObj.height,
          size: this.uploadObj.size
        },
        loadingText: '正在提交'
      }).then(res => {
        this.$util.message(res.message, 'success')
        setTimeout(() => {
            uni.switchTab({
              url: '/pages/clone/index?type=body'
            })
        }, 1000);
      });
    },
    upload() {
      var that = this;
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        compressed: false,
        success: function (file) {
          var fileName = file.name;
          if (!fileName) {
            var arr = file.tempFilePath.split('/')
            fileName = arr[arr.length - 1]
          }

          if (file.size && file.size / 1024 / 1024 > 300) {
            setTimeout(() => {
              that.$util.message('请上传300M以内的文件')
            }, 500);
            return;
          }
          if (file.duration && (file.duration > 300 || file.duration < 10)) {
            setTimeout(() => {
              that.$util.message('视频时长要求10秒到5分钟')
            }, 500);
            return;
          }

          that.uploadObj = {
            title: fileName,
            size: file.size,
            duration: file.duration,
            width: file.width,
            height: file.height,
            filePath: file.tempFilePath,
            thumbTempFilePath: file.thumbTempFilePath,
            progress: 0,
            status: 'loading'
          }
          // 上传视频
          that.$util.upload({
            url: '/userBody/upload',
            filePath: that.uploadObj.filePath,
            name: 'body',
            loading: false,
            onProgressUpdate: function (res) {
              that.uploadObj.progress = res.progress;
            }
          }).then(res => {
            that.uploadObj.status = 'success'
            that.uploadObj.url = res.url
            that.uploadObj.poster = res.poster
          }).catch(err => {
            that.uploadObj.status = 'fail'
            if (err) {
              that.$util.message(err.message, 'error')
            }
            that.clearUploadObj()
          })
        }
      });
    }

  }
}
</script>
<style scoped>
@import './create-body.css';
</style>
